<template>
  <div class="home-container layout-pd">
    <div class="page-container">
      <h4>伊莱特看板报表系统</h4>
      <el-row :gutter="12">
        <el-col :span="6" v-auths="[state.permissionType.sysAdmin, state.permissionType.pageData_page]">
          <el-card >
            <div>
              <el-image style="width: 100%; height: 120px;border-radius: 16px" :src="pageImageUrl" fit="fill" />
            </div>
            <h4>
              <router-link class="pagelink" to="/page1">生产看板</router-link>
            </h4>
          </el-card>
        </el-col>
        <el-col :span="6" v-auths="[state.permissionType.sysAdmin, state.permissionType.pageData_page2]">
          <el-card >
            <div>
              <el-image style="width: 100%; height: 120px;border-radius: 16px" :src="pageImageUrl" fit="fill" />
            </div>
            <h4>
              <router-link class="pagelink" target="_blank" to="/page2">销售看板</router-link>
            </h4>
          </el-card>
        </el-col>
        <el-col :span="6" v-auths="[state.permissionType.sysAdmin, state.permissionType.pageData_page3]">
          <el-card >
            <div>
              <el-image style="width: 100%; height: 120px;border-radius: 16px" :src="pageImageUrl" fit="fill" />
            </div>
            <h4>
              <router-link class="pagelink" to="/page3">销售订单生产进度</router-link>
            </h4>
          </el-card>
        </el-col>
        <el-col :span="6" v-auths="[state.permissionType.sysAdmin, state.permissionType.pageData_page4]">
          <el-card >
            <div>
              <el-image style="width: 100%; height: 120px;border-radius: 16px" :src="pageImageUrl" fit="fill" />
            </div>
            <h4>
              <router-link class="pagelink" to="/page4">钢球订单生产进度</router-link>
            </h4>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import PermissionType from "/@/utils/PermissionType";
import {reactive, onMounted, nextTick} from "vue";
const state = reactive({
  permissionType : PermissionType,
})
const pageImageUrl = 'https://img2.baidu.com/it/u=1126689368,2313036616&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=370';
</script>
<style scoped lang="scss">
.home-container {
  background: #32a99e;
  height: 100%;
  h4{
    width: 200px;
    font-weight: 600;
    font-size: 20px;
    color: #ffffff;
    margin: 0 auto 10px;
  }
  .page-container{
    width: 960px;
    padding: 10px;
    min-height: 100px;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    margin: 5vh auto 0;
  }
  .pagelink{
    width: 100%;
    display: inline-block;
    color: #0c9303;
    text-align: center;
    text-decoration:none;
  }
  .el-card__body{
    padding: 10px;
  }
}
</style>
